<!--配送商端-销售管理-手术跟台需求订单列表-->
<template>
  <div class="operation-list">
    <el-container class="container-box">
      <div class="tabs-box">
        <tabs
          :tabs-arr="indexTabsArr"
          @returnIndex="handleTabChange" />
      </div>
      <!-- 搜索查询 -->
      <el-header height="auto">
        <SearchForm
          show-collapse
          :label-width="'80px'"
          :data="operationOrderSearchForm"
          ref="operationOrderSearchForm"
          :compact-data="compactSearchForm"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        v-loading="tableLoading"
        :data="operationOrderList"
        height="400"
        :custom-attr="$TABLE_HEAD['beforeSettle.distributorSide.salesManagement.operatinOrder']"
        :columns="operationOrderColumns"
      >
        <!-- 操作列 -->
        <template
          slot="default-action"
          slot-scope="{row}">
          <el-button
            size="small"
            v-if="row.orderStatus== 1"
            @click.stop="goResponse(row)"
            type="text text-primary">响应</el-button>
          <el-button
            size="small"
            v-if="row.orderStatus== 2"
            @click.stop="handleDelivery(row)"
            type="text text-primary">发货</el-button>
          <el-button
            size="small"
            v-if="row.orderStatus== 3"
            @click.stop="handleOperationReturn(row)"
            type="text text-primary">术后还回</el-button>
          <el-button
            size="small"
            @click.stop="jumpDetailPage(row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import tabs from '@components/tabs/index.vue'

import {
  ORDER_STATUS,
  ORDER_COLUMNS,
  SEARCH_FORM,
  indexTabsArr
} from './const.js'
import { isObject, cloneDeep, hasIn } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import {
  needOrderList,
  deliveryOcBsNeedSaleOrderSixneedOrder,
  YyPssFollowOrderPageList,
  YyPssFollowOrderStatusCount
} from '@const/beforeSettleApi'
const headTabs = [0, 2, 7, 5]
export default {
  name: 'OperationList',
  components: { tabs, ElEditable, SearchForm },

  data () {
    return {
      indexTabsArr,
      submitLoading: false,
      // 查询配置信息
      operationOrderSearchForm: SEARCH_FORM,
      // table列表配置信息
      operationOrderColumns: ORDER_COLUMNS,
      operationOrderList: [],
      tableLoading: false,
      // 搜索查询条件
      searchQuery: {},
      // tab查询条件
      tabQuery: {},
      // 分页配置信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      tabIndex: 8
    }
  },
  computed: {
    compactSearchForm () {
      return this.operationOrderSearchForm.slice(0, 2)
    }
  },
  created () {
    this.indexTabsArr.forEach(item => {
      item.badge.value = null
    })
  },
  mounted () {
    this.getOperationOrderList()
    this.getStatus()
  },
  methods: {
    // 点击tab事件
    handleTabChange (index) {
      this.tabIndex =
        this.indexTabsArr[index].val === 'null'
          ? null
          : this.indexTabsArr[index].val
      this.curPage = 1
      this.getOperationOrderList()
    },
    getStatus () {
      this.$axios({
        method: 'post',
        url: YyPssFollowOrderStatusCount,
        data: {
          companyId: this.$store.state.companyId
        }

      }).then(res => {
        let arr = hasIn(res, 'data.payload') ? res.data.payload : []
        if (!arr.length) {
          return
        }
        this.indexTabsArr.forEach(item => {
          arr.forEach(ite => {
            if (ite.orderStatus === item.val) {
              item.badge = { value: ite.orderCount }
            }
          })
          if (item.val === 0) {
            item.badge.value = 0
            arr.forEach(ite => {
              item.badge.value += ite.orderCount
            })
          }
        })
      })
    },
    // 列表数据
    getOperationOrderList () {
      const query = {
        orderStatus: this.tabIndex || null,
        page: this.curPage,
        pageSize: this.pageSize,
        ...this.tabQuery,
        ...this.searchQuery
      }
      this.tableLoading = true
      this.submitLoading = true
      this.$axios
        .post(YyPssFollowOrderPageList, query)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.operationOrderList = hasIn(data, ['payload', 'content'])
            ? data.payload.content
            : []
          this.totalElements = hasIn(data, ['payload', 'totalElements'])
            ? data.payload.totalElements
            : 0
        })
        .catch(e => {})
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    // 发货
    handleDelivery (row) {
      const path =
        '/distributorSide/newSalesManagement/salesOrderTracking/operationOrder/deliveroods'
      const query = {
        id: row.pssFollowId
      }
      this.$router.push({ path, query })
    },
    // 术后退回
    handleOperationReturn (row) {
      const path =
        '/distributorSide/newSalesManagement/salesOrderTracking/operationOrder/returnOperation'
      const query = {
        id: row.pssFollowId
      }
      this.$router.push({ path, query })
    },
    // 详情
    jumpDetailPage (row) {
      this.$router.push({
        path: '/distributorSide/newSalesManagement/salesOrderTracking/operationOrder/newDetail',
        query: {
          id: row.pssFollowId,
          // eslint-disable-next-line no-undef
          status: row.orderStatus
        }
      })
    },
    goResponse (data) {
      this.$router.push({
        path: `/distributorSide/newSalesManagement/salesOrderTracking/operationOrder/response`,
        query: {
          id: data.pssFollowId,
          isShowList: Number(data.prodCount) !== 0 ? 0 : 1
        }
      })
    },
    // 查询
    searchForm (condition) {
      this.searchQuery = condition
      this.getOperationOrderList()
    },
    // 重置
    resetForm (condition) {
      this.curPage = 1
      this.searchQuery = condition
      this.getOperationOrderList()
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getOperationOrderList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getOperationOrderList()
    }
  }
}
</script>

<style lang="less">
.operation-list {
  height: 100%;
  overflow: auto;

  .container-box {
    overflow: auto;
    height: 100%;

    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
  }
}
</style>
